<template>
  <div class="box">
    <el-card class="card" style="margin-bottom: 10px">
      <h3 v-show="showTitle">
        <span>发现行业话题</span><span>挖掘人物观点</span>
      </h3>
      <!-- 检索 -->
      <div class="s-box">
        <div class="search-box">
          <el-input
            class="search-inp"
            placeholder="按人物、组织、发现相关话题或观点"
            v-model="searchInfo.word"
            clearable
            @keydown.enter.native="handleSearch"
            @clear="setWords('')"
          >
            <span slot="prefix" class="search-btn">检索内容</span>
          </el-input>
          <el-button type="primary" class="search-btn2" @click="handleSearch"
            >检索</el-button
          >
        </div>
        <div class="hot">
          <span class="label">更多推荐：</span>
          <ul class="hot-list">
            <li
              v-for="(item, index) in hotList"
              :key="index"
              @click="setWords(item)"
            >
              <i class="iconfont icon-shoucangzhuangtai"></i>
              <span>{{ item }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <!-- 默认展示的组件 -->
    <SDefault
      v-show="showTitle"
      v-loading="queryLoading"
      :searchPeople="searchPeople"
      :peopleInfo="peopleInfo"
      :searchTopic="searchTopic"
      :topicInfo="topicInfo"
      @gotoDetail="gotoDetail"
    ></SDefault>
    <!-- 结果组件 -->
    <SResult
      v-show="!showTitle"
      v-loading="queryLoading"
      :searchInfo="searchInfo"
      :resultInfo="resultInfo"
      @setWords="setWords"
      @gotoDetail="gotoDetail"
    ></SResult>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true,
      queryLoading: false,
      searchPeople: {
        ipi: "1",
        ips: "10",
        subIpi: "1",
        subIps: "5",
        people: "章建华",
      },
      peopleInfo: [],
      searchTopic: {
        ipi: "1",
        ips: "10",
        subIpi: "1",
        subIps: "5",
        topic: "十四五",
        topicLabel: '“十四五”'
        // topic: "能源",
      },
      topicInfo: [],
      searchInfo: {
        ipi: "1",
        ips: "10",
        subIpi: "1",
        subIps: "5",
        word: "",
        words: [""],
      },
      resultInfo: {},
      hotList: ["章建华", "“十四五”", "2022年两会", "曹仁贤", "刘汉元"],
    };
  },
  created() {
    this.queryPage(this.searchPeople, "peopleInfo");
    this.queryPage(this.searchTopic, "topicInfo");
    // this.queryPage(this.searchInfo, "resultInfo");
  },
  mounted() {},
  watch: {
    searchInfo: {
      handler(newVal) {
        if (newVal.word == "") {
          this.showTitle = true;
        }
      },
      deep: true,
    },
  },
  methods: {
    // 设置搜索内容
    setWords(item) {
      this.searchInfo.word = item;
      this.handleSearch();
    },
    gotoDetail(id) {
      // this.$router.push({
      //   name: "ConsultDetail",
      //   query: {
      //     id: id,
      //   },
      // });
      let routerData = this.$router.resolve({
        name: "ConsultDetail",
        query: {
          id: id,
        },
      });
      window.open(routerData.href, "_blank");
    },
    // 点击搜索逻辑处理
    handleSearch() {
      if (this.searchInfo.word != "") {
        this.showTitle = false;
        this.searchInfo.words = [this.searchInfo.word];
        this.queryPage(this.searchInfo, "resultInfo");
      } else {
        this.showTitle = true;
        // this.$message({
        //   message: "请输入检索内容！",
        //   type: "warning",
        // });
      }
    },
    // 请求接口
    queryPage(param, key) {
      this.queryLoading = true;
      this.$post(this.$Url.industryPointOfView.opinionQueryPage, param).then(
        (res) => {
          this.queryLoading = false;
          if (res.status == 200) {
            let data = res.data;
            if (key != "resultInfo") {
              this[key] = data.result;
            } else {
              this[key] = data;
            }
            window.scrollTo(0, 0);
          } else {
            this.$message({
              message: res.message || "接口异常！",
              type: "warning",
            });
          }
        }
      );
    },
  },
  components: {
    SDefault: () => import("./sdefault.vue"),
    SResult: () => import("./sresult.vue"),
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  .card {
    h3 {
      position: relative;
      line-height: 0.53rem;
      margin-top: 0.2rem;
      margin-bottom: 0.3rem;
      text-align: center;
      font-weight: 400;
      font-size: 0.3rem;
      color: #396cff;
      span {
        display: inline-block;
        padding: 0 10px;
      }
    }
    .s-box {
      position: relative;
      // margin-bottom: 0.12rem;
      text-align: center;
      .search-box {
        position: relative;
        display: inline-flex;
        align-items: center;
        .advanced-box {
          position: relative;
          display: inline-block;
          z-index: 3;
          height: 0.4rem;
          line-height: 0.4rem;
          margin-right: 0.2rem;
          .advanced-btn {
            // font-family: SourceHanSansCN-Medium;
            font-size: 0.16rem;
            color: $mainColor;
            cursor: pointer;
            span {
              display: inline-block;
              margin-right: 0.02rem;
            }
          }
        }
        .search-inp {
          width: 7.7rem;
          height: 0.4rem;
          margin-right: 0.14rem;
          vertical-align: middle;
          background-color: $color2;
          ::v-deep {
            ::placeholder {
              color: $color49 !important;
              // color: red !important;
            }
            .el-input__inner {
              height: 0.4rem;
              line-height: 0.4rem;
              padding-left: 0.95rem;
              padding-right: 0.15rem;
              border-color: $mainColor;
              border-radius: 6px;
              // font-family: SourceHanSansCN-Regular;
              font-size: 0.14rem;
              color: $color49;
              background-color: transparent;
            }
            .el-input__prefix {
              position: absolute;
              top: 0;
              left: 0;
              width: 0.8rem;
              line-height: 0.4rem;
              font-size: 0.14rem;
              color: $mainColor;
              &:after {
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: 0.32rem;
                margin-top: -0.16rem;
                background-color: $color50;
                content: "";
              }
            }
            .el-input__prefix2 {
              position: relative;
              width: 0.64rem;
              padding: 0;
              border-color: $mainColor;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
              box-sizing: border-box;
              text-align: center;
              background-color: transparent;
              // cursor: pointer;
              .search-btn {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 0.14rem;
                font-weight: bold;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
        .search-btn2 {
          width: 0.96rem;
          height: 0.4rem;
          padding: 0;
          border-color: $mainColor;
          border-radius: 6px;
          box-sizing: border-box;
          // font-family: SourceHanSansCN-Regular;
          font-size: 0.16rem;
          font-weight: bold;
          letter-spacing: 1px;
          color: $color17;
          vertical-align: middle;
          background-color: $mainColor;
          &:hover {
            background-color: rgba(47, 65, 200, 0.8);
          }
        }
      }
    }
    .hot {
      position: relative;
      display: flex;
      align-items: center;
      width: 8.8rem;
      margin: 0.3rem auto 0;
      .label {
        width: 1rem;
        height: 0.26rem;
        line-height: 0.26rem;
        text-align: left;
        font-weight: 400;
        font-size: 0.14rem;
        color: #101010;
      }
      .hot-list {
        position: relative;
        width: calc(100% - 1rem);
        text-align: left;
        li {
          position: relative;
          display: inline-block;
          margin-right: 0.2rem;
          border: 1px solid #bbb;
          border-radius: 4px;
          cursor: pointer;
          &:hover {
            border-color: $mainColor;
            i {
              background-color: $mainColor;
            }
            span {
              color: $mainColor;
            }
          }
          i {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 0.3rem;
            height: 0.24rem;
            line-height: 0.24rem;
            text-align: center;
            font-size: 0.14rem;
            color: #fff;
            background-color: #bbb;
          }
          span {
            display: inline-block;
            height: 0.24rem;
            line-height: 0.24rem;
            padding-left: calc(0.3rem + 0.06rem);
            padding-right: 0.06rem;
            text-align: center;
            font-size: 0.14rem;
            color: #bbb;
          }
        }
      }
    }
  }
}
</style>